<template>
  <div class="serve-item">
    <div class="function-list-tit">我的服务</div>
    <ul class="function-list-ess clearfix">
      <li class="fl">
        <a href="javascript:;" class="clearfix">
          <i class="sign"></i>
          <span>签到赚钱</span>
        </a>
      </li>
      <li class="fl">
        <a href="javascript:;" class="clearfix">
          <i class="cardChange"></i>
          <span>会员卡兑换</span>
        </a>
      </li>
      <li class="fl">
        <a href="javascript:void(0);" class="clearfix">
          <i class="prize"></i>
          <span>我的奖品</span>
        </a>
      </li>
      <li class="fl">
        <a href="javascript:void(0);">
          <i class="evaluate"></i>
          <span>评价中心</span>
        </a>
      </li>
      <li class="fl">
        <a href="javascript:void(0);" class="collected clearfix">
          <i class="collect"></i>
          <span>我的收藏</span>
        </a>
      </li>
      <li class="fl">
        <a href="javascript:;" class="clearfix">
          <i class="equityMoney"></i>
          <span>礼品兑换</span>
        </a>
      </li>
      <li class="fl">
        <a href="javascript:;" class="clearfix">
          <i class="brand"></i>
          <span>品牌合作</span>
        </a>
      </li>
      <li class="fl">
        <a href="javascript:;" class="clearfix">
          <i class="serve"></i>
          <span>专属客服</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style lang="stylus" scoped>
.serve-item
  background #fff
  margin 0.1rem 0.1rem
  border-radius 0.06rem
  margin-bottom 0.4rem
  padding-bottom 0.1rem
  .function-list-tit
    padding 0 0.17rem
    height 0.5rem
    line-height 0.5rem
    font-size 0.18rem
    color  #333333
    border-bottom 1px solid #eee 
  .function-list-ess
    display flex
    flex-wrap wrap
    li 
      width 25%
      text-align center
      margin-top 0.15rem
      i 
        display  block 
        width  0.38rem 
        height  0.38rem 
        margin  0 auto 0.04rem 
        background  no-repeat center center/cover 
      span 
        color #666
    li:nth-of-type(1) 
      i
        background-image  url(https://api.10street.cn/wap/images/mycenter/my_tool_1.png)
    li:nth-of-type(2) 
      i
        background-image  url(https://api.10street.cn/wap/images/mycenter/my_tool_2.png) 
    li:nth-of-type(3) 
      i
        background-image  url(https://api.10street.cn/wap/images/mycenter/my_tool_3.png) 
    li:nth-of-type(4) 
      i
        background-image  url(https://api.10street.cn/wap/images/mycenter/my_tool_4.png) 
    li:nth-of-type(5) 
      i
        background-image  url(https://api.10street.cn/wap/images/mycenter/my_tool_5.png) 
    li:nth-of-type(6) 
      i
        background-image  url(https://api.10street.cn/wap/images/mycenter/my_tool_6.png) 
    li:nth-of-type(7) 
      i
        background-image  url(https://api.10street.cn/wap/images/mycenter/my_tool_7.png) 
    li:nth-of-type(8) 
      i
        background-image  url(https://api.10street.cn/wap/images/mycenter/my_tool_8.png)  

</style>